import React from 'react'
import PropTypes from 'prop-types'
import Link from 'next/link'
import '../../../styles.styl'
import { withRouter } from 'next/router'

const CustomLink = ({lists, isFetching}) => {
  return (
    <div>
      <img style={{ display: isFetching ? 'block' : 'none', margin: '25% auto', width: '80px' }} src="../../../static/images/loading.gif" />
      <ul style={{ display: !isFetching ? 'block' : 'none' }}>
        {
          lists.map(({show}) => 
            <li key={ show.id }>
              <Link href={{ pathname: "/about", query: { id: show.id } }}>
                <a className="link-to">
                  <img src={show.image ? show.image.medium : '../../../static/images/moren.png'} alt="" />
                  <p> { show.name } </p>
                  <div className="show-block">
                    <span> { show.language } </span>
                    <span> { show.status } </span>
                  </div>
                </a>
              </Link>
            </li>
          )
        }
      </ul>
      <style jsx>{`
        ul {
          display: block;
          overflow: hidden;
        }
        ul>li {
          float: left;
          box-shadow: 0 0 2px #e1e1e1;
          padding: 10px;
          margin: 2px 5px 20px;
        }
        ul>li:hover {
          box-shadow: 0 0 3px #ffbd00;          
        }
        ul>li img {
          width: 210px;
          height: 295px;
        }
        ul>li p {
          width: 210px;
          height: 36px;
          line-height: 18px;
          margin: 0;     
        }
        .show-block {
          display: flex;
          justify-content: space-between;
          color: #ffbd00;
        }
      `}
      </style>
    </div>
  )
}

CustomLink.protoTypes = {
  lists: PropTypes.array.isRequired,
  isFetching: PropTypes.bool.isRequired,
}

export default withRouter(CustomLink)